<template>
  <zm-view ref="view">
    <image class="header-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/mall-header-bg.png')" mode="scaleToFill" />
    <zm-navbar :border-bottom="false" background="transparent" :title="orderInfo.orderStatusName">
      <!-- <template slot="right">
        <zm-icon v-if="isShowDelete" name="delete-o" size="36rpx" @click="handleDelete"></zm-icon>
      </template> -->
    </zm-navbar>
    <view class="content-wrap">
      <!-- 待支付 -->
      <view v-if="orderInfo.orderStatus == 0" class="flex flex-1 flex-col items-center">
        <view class="flex font-26 text-center py-40">
          <text>请尽快完成付款，还剩</text>
          <u-count-down :time="orderInfo.autoTime * 1000" auto-start format="mm分ss秒" @finish="handleGetInfo"></u-count-down>
        </view>
        <view class="flex justify-between w-full mb-36 px-60">
          <zm-button round block plain type="default" color="transparent" border-color="#333333" height="62rpx" font-size="26rpx" @click="handleCancel">取消订单</zm-button>
          <zm-button round block type="default" height="62rpx" font-size="26rpx" custom-class="ml-36" @click="handlePay">立即付款</zm-button>
        </view>
      </view>
      <view v-if="orderInfo.orderStatus == 1" class="text-center font-26 py-40">支付成功，商品出库中</view>
      <view v-if="orderInfo.orderStatus == 3" class="text-center font-26 py-40">订单超时，已自动关闭</view>
      <view v-if="orderInfo.orderStatus == 4" class="text-center font-26 py-40">商品购买成功，等待兑换</view>
      <view v-if="orderInfo.orderStatus == 5" class="text-center font-26 py-40">订单失败，已自动关闭</view>
      <view v-if="orderInfo.orderStatus == 6" class="text-center font-26 py-40">{{ orderInfo.refundTime }} 完成退款</view>
      <view v-if="orderInfo.orderStatus == 7" class="text-center font-26 py-40">已为您进行退款，预计1-3个工作日原路退回</view>

      <!-- 商品信息 -->
      <view class="goods-card flex px-20 py-24 radius-16 bg-white">
        <u-image width="140rpx" height="140rpx" radius="12rpx" mode="scaleToFill" :src="orderInfo.imageUrl"></u-image>
        <view class="flex flex-col ml-20">
          <text class="font-30 font-bold text-row-1">{{ orderInfo.name }}</text>
          <text class="text-666 my-10">{{ orderInfo.number }}份</text>
          <text v-if="isShowValidity" class="text-666">有效期： 至 {{ isShowValidity }}</text>
        </view>
      </view>
      <view v-if="isShowGoods" class="flex flex-col px-20 py-24 radius-16 mt-20 bg-white">
        <text class="font-32 font-bold">商品明细</text>
        <view v-for="(item, index) in orderInfo.detail" :key="index" class="flex flex-col mt-30">
          <view class="flex items-center justify-between">
            <text class="font-28 font-bold">{{ item.name }}</text>
            <text class="font-26 text-999">X{{ item.useNumber }}</text>
          </view>
          <template v-for="goods in item.goodsList">
            <view v-if="goods.isRefund == 0" :key="goods.code" class="flex flex-col font-26 mt-20">
              <view v-if="goods.code" class="flex items-center">
                <text class="text-666">{{ goods.password ? "卡号：" : "券密码：" }}</text>
                <text>{{ goods.code }}</text>
                <view class="copy-btn" @click="useCopy(goods.code)">复制</view>
              </view>
              <view v-if="goods.password" class="flex items-center mt-10">
                <text class="text-666">{{ goods.code ? "卡密码：" : "券密码：" }}</text>
                <text>{{ goods.password }}</text>
                <view class="copy-btn" @click="useCopy(goods.password)">复制</view>
              </view>
            </view>
          </template>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="p-24 mt-20 bg-white radius-12">
        <view class="flex flex-1 justify-between">
          <text class="font-32 font-bold">订单信息</text>
          <zm-icon-text
            v-if="orderInfo.otherPayInfo && orderInfo.otherPayInfo.length"
            custom-class="click-animation"
            name="arrow"
            text="金额明细"
            text-left
            size="26rpx"
            color="#666666"
            text-color="#666666"
            text-size="26rpx"
            @click="handleClickPriceDetail"
          ></zm-icon-text>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">订单金额：</text>
          <text class="text-price-before ml-10">{{ orderInfo.asPrice | formatDigit({ trimZero: false }) }}</text>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">实付金额：</text>
          <text class="text-price-before ml-10">{{ orderInfo.thirdMoney | formatDigit({ trimZero: false }) }}</text>
        </view>
        <view class="flex font-26 mt-20 items-center">
          <text class="text-666">订单号码：</text>
          <text class="ml-10">{{ orderInfo.orderNo }}</text>
          <view class="copy-btn" @click="useCopy(orderInfo.orderNo)">复制</view>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">订单时间：</text>
          <text class="ml-10">{{ orderInfo.orderTime }}</text>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">手机号码：</text>
          <text class="ml-10">{{ orderInfo.mobile }}</text>
        </view>
      </view>
    </view>
    <zm-popup :show.sync="showDetalPopup" mode="bottom" height="500rpx" max-height="500rpx" border-radius="16rpx" closeable safe-area-inset-bottom>
      <view slot="header" class="flex justify-center p-24 font-32">金额明细</view>
      <view class="p-24">
        <view v-for="(item, index) in orderInfo.otherPayInfo" :key="index" class="flex items-center justify-between font-26">
          <text class="text-666">{{ item.name }}</text>
          <text>{{ item.value }}</text>
        </view>
      </view>
      <view slot="footer" class="p-24">
        <zm-button size="medium" round @click="showDetalPopup = false">确定</zm-button>
      </view>
    </zm-popup>
    <!-- 支付组件 -->
    <pay-way-popup ref="pay" :has-balance-pay="false" :has-integral-pay="false"> </pay-way-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      orderId: "",
      orderInfo: {},
      showDetalPopup: false
    }
  },
  computed: {
    isShowDelete() {
      const status = ["3", "6", "7"]
      return !status.includes(this.orderInfo.orderStatus)
    },
    isShowValidity() {
      return this.orderInfo?.detail?.[0]?.goodsList?.[0]?.eD || false
    },
    isShowGoods() {
      let isNoRefund = false
      this.orderInfo?.detail?.forEach((item) => {
        item.goodsList.forEach((goods) => {
          if (goods.isRefund == 0) {
            isNoRefund = true
          }
        })
      })
      return this.orderInfo?.detail?.length && isNoRefund && (this.orderInfo.orderStatus == 4 || this.orderInfo.orderStatus == 8)
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.handleGetInfo()
  },
  methods: {
    handleDelete() {
      uni.$dialog({
        title: "提示",
        content: "确定删除该订单吗?",
        asyncClose: true,
        showConfirmButton: true,
        showCancelButton: true,
        confirmButtonText: "确定删除",
        onConfirm: ({ close, done }) => {
          uni.$api.mall
            .delOrder({ orderId: this.orderInfo.orderId, type: this.orderInfo.type })
            .then(() => {
              close()
              uni.navigateBack()
            })
            .catch(() => {
              done()
            })
        },
        onCancel: ({ close }) => {
          close()
        }
      })
    },
    handleGetInfo() {
      uni.$api.mall.getOrderInfo({ orderId: this.orderId }).then((res) => {
        this.orderInfo = res
        this.orderInfo.detail?.forEach((item) => {
          item.useNumber = item.goodsList.reduce((acc, obj) => (obj.isRefund == 0 ? acc + 1 : acc), 0)
        })
        uni.setNavigationBarTitle({ title: this.orderInfo.orderStatusName })
      })
    },
    handleClickPriceDetail() {
      this.showDetalPopup = true
    },
    handleCancel() {
      uni
        .$confirm({
          content: "是否取消订单"
        })
        .then(() => {
          uni.$api.mall.cancelOrder({ orderId: this.orderId }).then(() => {
            this.handleGetInfo()
          })
        })
    },
    handlePay() {
      this.$refs.pay.open({
        isContinuePay: true,
        orderId: this.orderId,
        orderType: "mall",
        preInfo: {
          needPay: this.orderInfo.asPrice
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 436rpx;
  position: fixed;
}
.content-wrap {
  padding: 24rpx;
  padding-top: 0;
  position: relative;
  .goods-card {
    box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(208, 208, 208, 0.16);
  }

  .copy-btn {
    width: 56rpx;
    height: 30rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    justify-content: center;
    border: 2rpx solid #cccccc;
    font-size: 22rpx;
    color: #999999;
    margin-left: 14rpx;
  }
}
</style>
